<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>充值贝壳</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/jweixin-1.6.0.js"></script>
  <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    overflow-y: auto;
  }

  .recharge {
    padding: 14px 16px;
  }

  .part-box {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: #24166f;
  }

  .part-title {
    margin-top: 2px;
  }

  .input-box {
    margin-top: 12px;
    margin-bottom: 6px;
  }

  .input-box .van-cell {
    background: #6d5cfe;
    border-radius: 25px;
  }

  .input-box .van-field__control {
    color: #fff;
  }
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
  }
  .nickname {
    margin-left: 10px;
  }
  .recharge-title {
    margin-bottom: 12px;
  }

  .recharge-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 10px;
    margin-bottom: 16px;
  }

  .recharge-item {
    width: calc(50% - 5px);
    max-width: 200px;
    padding: 13px 10px;
    display: flex;
    border-radius: 25px;
    border: 1px solid #441a9a;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 12px;
  }

  .recharge-item.active {
    padding: 14px 11px;
    background: linear-gradient(90deg, #7d29ff 0%, #3fdcfa 100%);
    border: none;
  }
  .recharge-item.center {
    justify-content: center;
  }
  .recharge-item .left {
    font-size: 0;
  }

  .recharge-item .left img {
    margin-right: 6px;
  }

  .recharge-item .left * {
    font-size: 12px;
    vertical-align: middle;
  }
  .pay-btn {
    width: 100%;
    font-size: 16px;
    margin-bottom: 8px;
  }
  .protocol {
    padding: 20px 14px;
    color: #bbb6ff;
    font-size: 12px;
    line-height: 1.5;
  }
  .protocol span {
    color: #7188ff;
  }
  .mask {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }

  </style>
</head>

<body>
  <div id="app">
    <van-overlay :show="showMask" @click="showMask = false">
      <img class="mask" src="/mobile/img/mask.png" alt="">
    </van-overlay>
    <van-notice-bar background="#24166F" color="#BBB6FF" :scrollable="false">
      <template #left-icon>
        <img src="/mobile/img/recharge-notice.png" width="22" height="22" alt="">
      </template>
      <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item>Safari浏览器充值，请关闭「阻止弹出式窗口」选项</van-swipe-item>
        <van-swipe-item>充值到账时间可能有一定延迟，请耐心等待</van-swipe-item>
        <van-swipe-item>充值遇到问题，请联系贝贝语音在线客服</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <div class="recharge">
      <div class="part-box" >
        <div class="part-title">请输入充值用户ID</div>
        <div class="input-box">
          <van-field v-model="goodNum" type="number" @blur="getUserInfo" placeholder="请输入充值用户ID"></van-field>
        </div>
      </div>
      <div class="part-box">
        <div class="user-info" v-if="avatar">
          <van-image round width="60px" height="60px" :src="avatar +'?x-oss-process=image/resize,h_120,m_fill/format,jpg'"></van-image>
          <span class="nickname">{{userNickname}}</span>
        </div>
        <div class="recharge-title">请选择充值贝壳数量</div>
        <div class="recharge-items">
          <div :class="['recharge-item', index === rechargeIndex ? 'active' : '']" v-for="(item, index) in rechargeItems" :key="index" @click="rechargeItemClick(index)">
            <div class="left">
              <img src="/mobile/img/recharge-shell.png" width="14" height="14" alt="">
              <span>{{item.coin}}</span>
            </div>
            <div>￥{{item.money}}</div>
          </div>
        </div>
        <div class="recharge-title">请选择支付方式</div>
        <div class="recharge-items">
          <div v-if="isWx" :class="['recharge-item center', payBtnIndex === 0 ? 'active' : '']" @click="payBtnIndex = 0">
            <div class="left">
              <img src="/mobile/img/recharge-wxpay.png" width="24" height="24" alt="">
            </div>
            <div>微信支付</div>
          </div>
          <div v-if="isWx" :class="['recharge-item center', payBtnIndex === 1 ? 'active' : '']" @click="payBtnIndex = 1">
            <div>其他支付</div>
          </div>
          <div v-else :class="['recharge-item center', payBtnIndex === 1 ? 'active' : '']" @click="payBtnIndex = 1">
            <div class="left">
              <img src="/mobile/img/recharge-alipay.png" width="24" height="24" alt="">
            </div>
            <div>支付宝支付</div>
          </div>
        </div>
        <van-button class="pay-btn" round color="linear-gradient(to right, #7D29FE, #D591FE)" @click="rechargePay" :loading="payLoading" loading-text="充值中...">支付{{money}}元</van-button>
      </div>
      <div class="part-box protocol">
        <div class="recharge-title">温馨提示</div>
        <div>1.充值即代表已阅读并同意<span @click="getProtocol">《贝贝语音充值协议》</span>。</div>
        <div>2.充值前请确认已满18岁，未成年人不允许充值和打赏。</div>
        <div>3.切勿轻信刷单、低价充值等类似的言论，谨防上当受骗。</div>
        <div>4.苹果用户在Safari浏览器中选择支付宝充值时，请确保Safari浏览器设置中的「阻止弹出式窗口」选项已关闭，否则无法跳转到支付宝充值。</div>
        <div>5.若充值过程中遇到问题，请咨询贝贝语音在线客服。</div>
      </div>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      code: '',
      goodNum: '',
      avatar: '',
      userNickname: '',
      uid: '',
      money: 10,
      rechargeItems: [],
      rechargeIndex: 0,
      payBtnIndex: 0,
      openId: '',
      showMask: false,
      isWx: false,
      timer: null,
      payLoading: false,
      aliFlag: '',
      wxFlag: '',
      payType: ''
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }

      // 获取充值项
      this.getData()

      var data = parse(location.search)
      var userAgent = navigator.userAgent
      this.isWx = userAgent.includes('MicroMessenger')
      console.log(this.isWx)
      var openid = localStorage.getItem('openid')
      if (this.isWx) {
        if (!openid) {
          if (data.code) {
            this.getOpenID(data.code)
          } else {
            this.getCode(location.href.split('#')[0])
          }
        } else {
          this.openId = openid
        }
      } else {
        this.payBtnIndex = 1
        request.get(`/api/pay/pay/w/getZFBPayType`).then(res => {
          console.log(res)
          this.payType = res.data
        })
      }
    },
    methods: {
      getData() {
        var query = 'type=0'
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/pay/pay/w/getPayItem?${str}`).then(res => {
          console.log(res)
          this.rechargeItems = res.data
          this.money = res.data[0].money
        })
        request.get('/api/pay/pay/w/getAndroidPayType').then(res => {
          console.log(res)
          this.wxFlag = res.data.wxFlag
          this.aliFlag = res.data.aliFlag
        })
      },
      getOpenID (code) {
        request.post('/api/pay/wechat/getOpenId', {
          code: code,
        }).then(res => {
          console.log(res)
          this.openId = res.data.openid
          localStorage.setItem('openid', res.data.openid)
        })
      },
      getCode (url) {
        request.post('/api/pay/wechat/getCode', {
          redirectUri: url,
        }).then(res => {
          console.log(res)
          location.href = res.data
        })
      },
      getUserInfo() {
        if (!this.goodNum) {
          return
        }

        // 微信环境
        if (this.isWx) {
          // 如果没有openId就再获取一次,放在这是因为必须要输入用户信息，如果没有下单时就能带上
          if (this.openId === '') {
            this.getOpenID()
          }
        }
        
        var query = `goodNum=${this.goodNum}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/pay/pay/w/getUserInfoByGoodNum?${str}`).then(res => {
          console.log(res)
          if (!res.data) {
            this.$toast('没有查询到用户信息，请检查用户ID是否输入正确')
            this.avatar = ''
            this.userNickname = null
            this.uid = null
            return
          }
          this.avatar = res.data.avatar
          this.userNickname = res.data.userNickname
          this.uid = res.data.id
        })
      },
      rechargeItemClick (index) {
        this.rechargeIndex = index
        this.money = this.rechargeItems[index].money
      },
      getProtocol () {
        location.href = '/mobile/common/index.html?id=6'
      },
      rechargePay () {
        if (this.payLoading) {
          return
        }
        if (!this.goodNum) {
          this.$toast('请输入充值用户ID')
          return
        }
        if (!this.uid) {
          this.$toast('没有查询到用户信息，请检查用户ID是否输入正确')
          return
        }
        console.log(this.isWx)
        var _this = this
        if (this.isWx) {
          // 微信支付
          if (this.payBtnIndex === 1) {
            this.showMask = true
            return
          }
          if (this.wxFlag === '0') {
            this.$toast('暂时无法使用微信支付')
            return
          }
          request.post('/api/pay/wechat/getConfig').then(res => {
            console.log(res)
            var config = res.data
            wx.config({
              debug: false,
              appId: config.appId,
              timestamp: config.timestamp.toString(),
              nonceStr: config.nonceStr,
              signature: config.signature,
              jsApiList: ['chooseWXPay']
            })
            this.payLoading = true
            wx.ready(() => {
              request.post('/api/pay/pay/w/createSdPay', {
                uid: this.uid,
                payBeanId: this.rechargeItems[this.rechargeIndex].id,
                payType: 3,
                wxopenId: this.openId
              }).then(payInfo => {
                console.log(payInfo)
                var data = payInfo.data.payContent
                console.log(data)
                top.location.href = data
                setTimeout(() => {
                  this.payLoading = false
                }, 1000)
              }).catch(() => {
                this.payLoading = false
              })
            })
          })
        } else {
          if (this.aliFlag === '0') {
            this.$toast('暂时无法使用支付宝支付')
            return
          }
          // 支付宝支付
          this.payLoading = true
          request.post('/api/pay/pay/w/createSftPay', {
            uid: this.uid,
            payBeanId: this.rechargeItems[this.rechargeIndex].id,
            payType: 2,
          }).then(payInfo => {
            console.log(payInfo)
            var data = payInfo.data.payContent
            console.log(data)
            console.log('this.payType', this.payType)
            // 杉德支付
            if (this.payType === '1') {
              top.location.href = data
              setTimeout(() => {
                this.payLoading = false
              }, 1000)
            } else {
              // 盛付通支付
              var query = encodeURIComponent(`qrUrl=${data}`)
              var url = `alipays://platformapi/startapp?appId=2021004127690057&pagePath=/pages/hub/lite&query=${query}`
              top.location.href = `https://ds.alipay.com/?scheme=` + encodeURIComponent(url)

              setTimeout(() => {
                this.payLoading = false
              }, 1000)
            }
          }).catch(() => {
            this.payLoading = false
          })
        }
      }
    }
  })
  </script>
</body>

</html>